<template>
  <div class="WriteOff">
    <!-- 公司logo -->
    <div class="WriteOff_logo">
      <img :src="$base.baseImg + data.merchant.logo" />
    </div>
    <!-- 公司内容 -->
    <div class="WriteOff_box">
      <h3>{{ data.merchant.mName }}</h3>
      <a :href="'tel:' + data.merchant.phone">{{ data.merchant.phone }}</a>
      <van-row>
        <van-col span="22">
          <p>商家地址：{{ data.merchant.address }}</p>
        </van-col>
        <van-col span="2">
          <img @click="openLocation" src="@/assets/address.png" alt="定位" />
        </van-col>
      </van-row>
    </div>
    <!-- 二维码 -->
    <div class="erweima">
      <div ref="qrCodeUrl"></div>
      <p>请出示给商家使用微信扫码使用</p>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import QRCode from "qrcodejs2";
import { Col, Row } from "vant";

Vue.use(Col);
Vue.use(Row);
@Component({})
export default class WriteOff extends Vue {
  private data = {
    merchant: {
      address: "",
      auditTime: 0,
      businessLicense: "",
      createTime: 0,
      desc: "",
      excuse: "",
      lat: "",
      logo: "",
      lon: "",
      mName: "",
      mid: 0,
      msg: "",
      name: "",
      phone: "",
      status: 0,
      typeId: 0,
      userId: 0,
    },
    qrCode: "",
  };
  private created() {
    this.$common.setWxConfig(window.location.href);
  }
  private mounted() {
    this.$common.getAuthToken(this.creatQrCode);
  }
  private creatQrCode() {
    this.$post(`useOrder`, {
      orderNumber: this.$route.params.id,
    }).then((res: any) => {
      if (res.code == 0) {
        new QRCode(this.$refs.qrCodeUrl, {
          text: `http://www.haocheng2020.com/codeCcanningVerification/${res.data.qrCode}`,
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
        this.data = res.data;
      }
    });
  }
  private openLocation() {
    let that = this;
    this.$wx.ready(function () {
      that.$wx.openLocation({
        latitude: parseFloat(that.data.merchant.lat),
        longitude: parseFloat(that.data.merchant.lon),
        name: that.data.merchant.mName,
        address: that.data.merchant.address,
        scale: 20,
        infoUrl: "",
      });
    });
  }
}
</script>

<style lang="scss">
.WriteOff {
  width: 100%;
  .WriteOff_logo {
    width: 100%;
    padding: 30px;
    height: 300px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      display: block;
    }
  }
  .WriteOff_box {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: #fff;
    h3 {
      font-size: 32px;
      font-weight: 400;
      color: #000000;
      line-height: 1.5;
    }
    a {
      font-size: 30px;
      font-weight: 300;
      color: blue;
      line-height: 1.5;
    }
    p {
      font-size: 30px;
      font-weight: 300;
      color: #343434;
      line-height: 1.5;
    }
    img {
      width: 40px;
      display: block;
      float: right;
      margin-top: -50px;
    }
  }
  .erweima {
    width: 100%;
    padding: 50px;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 30px;
    div {
      width: 100%;
      img {
        margin: 0 auto;
      }
    }
    p {
      font-size: 30px;
      color: #e32519;
      line-height: 2;
      text-align: center;
    }
  }
}
</style>